<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="服务名称" prop="serverId">
        <el-select
            v-model="form.serverId"
            placeholder="请填写服务路由名称"
            v-if="serverList !== undefined && serverList.length > 0"
            class="handle-select mr10"
            filterable
            clearable
            style="width: 300px"
        >
          <el-option
              v-for="item in serverList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请求方式" prop="requestMethod">
        <el-select
            v-model="form.requestMethod"
            size="small"
            placeholder="请填写请求方式"
            clearable
            filterable
            style="width: 300px"
        >
          <el-option
              v-for="item in $enum.getMapItems('requestMethod')"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="控制器名称" prop="controllerName">
        <el-input
            v-model="form.controllerName"
            placeholder="请填写控制器名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="API名称" prop="apiName">
        <el-input
            v-model="form.apiName"
            placeholder="请填写API名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="API路径" prop="apiUrl">
        <el-input
            v-model="form.apiUrl"
            placeholder="请填写API路径"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设为隐藏" prop="hideFlag">
        <el-switch v-model="form.hideFlag" active-color="#13ce66"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
            size="small"
            v-model="form.remark"
            placeholder="请填写备注"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            show-word-limit
            maxlength="99"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="saveEdit"
        >保存
        </el-button
        >
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  serverApiDetailApi,
  serverApiEditApi,
  serverApiSaveApi,
} from "../../../api/mgt/system/serverApi";
import {createObjectBase, deepCopy} from "@/utils";
import {serverListEnabledApi} from "@/api/mgt/system/server";

const obj = {
  //信息
  id: "",
  requestMethod: "",
  controllerName: "",
  apiName: "",
  apiUrl: "",
  hideFlag: false,
  remark: "",
  serverId: ""
};

export default {
  data() {
    return {
      form: deepCopy(obj),
      serverList: [],
      rules: {
        serverId: {required: false, message: "请填写服务路由名称", trigger: "change"},
        controllerName: [
          {required: true, message: "请填写控制器名称", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        apiName: [
          {required: true, message: "请填写API名称", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        requestMethod: [
          {required: true, message: "请填写请求方式", trigger: "change"},
          {max: 10, message: "长度不能超过10个字符", trigger: "change"},
        ],
        apiUrl: [
          {required: true, message: "请填写API路径", trigger: "change"},
          {max: 100, message: "长度不能超过100个字符", trigger: "change"},
        ],
        remark: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    // 编辑操作
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
        }
      } else {
        serverApiDetailApi({id}).then((res) => {
          const data = deepCopy(res?.bizData);
          this.form = data;
        });
      }
    },
    getServerList() {
      serverListEnabledApi().then((res) => {
        this.serverList = res.bizData;
      });
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          const {id} = data;
          const fn = id ? serverApiEditApi : serverApiSaveApi;
          fn(data).then((res) => {
            this.goBack();
          });
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/serverApi/page",
      });
    },
  },
  created() {
    const {id} = this.$route.query;
    this.getDetail(id);
    this.getServerList();
  },
};
</script>
